<template>
  <div class="search_box_list max">
    <div class="box_list form">
      <!-- tag -->
      <div class="box_list_tag">
        <a-breadcrumb>
          <span slot="separator">></span>
          <a-breadcrumb-item><a href="/homes/homeView/home4S">首页</a></a-breadcrumb-item>
          <a-breadcrumb-item>
            <div class="searchLive1"
                 @mouseover="selectStyle1">
              <div class="searchLive1box">{{leve1Name}}
                <a-icon type="down"
                        class="icondown" />
              </div>
              <div class="searchLive2"
                   v-if="leve1">
                <span v-for="(item, i) in leve1Arr"
                      :key="i"
                      @click="leve1Click1(item)"> {{item}}</span>
              </div>
            </div>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <div class="searchLive11"
                 @mouseover="selectStyle2">
              <div class="searchLive1box">{{leve2Name}}
                <a-icon type="down"
                        class="icondown" />
              </div>
              <div class="searchLive2"
                   v-if="leve2">
                <span v-for="(item, i) in leve2Arr"
                      :key="i"
                      @click="leve1Click2(item)"> {{item}}</span>
              </div>
            </div>
          </a-breadcrumb-item>
          <a-breadcrumb-item v-for="item in searchList"
                             :key="item.id">
            <a-tag closable
                   @close="preventDefault(1)"
                   v-if="setArr.mainTain.length !== 0">
              维修保养：{{mainTainStrong}}
            </a-tag>
            <a-tag closable
                   @close="preventDefault(2)"
                   v-if="setArr.size.length !== 0">
              规格尺寸：{{}}
            </a-tag>
            <a-tag closable
                   @close="preventDefault(3)"
                   v-if="setArr.city.length !== 0">
              产地：{{}}
            </a-tag>
          </a-breadcrumb-item>

        </a-breadcrumb>

      </div>
      <!-- 基础选项 -->
      <div class="list_title">
        <div class="list_title_li"
             :style="{height: Number(setArr.brandHeigt) + Number(16) + 'px'}">
          <div class="tltle_li_left"
               :style="{height: Number(setArr.brandHeigt) + Number(15) + 'px'}">
            品牌
          </div>
          <div class="title_li_right">
            <div class="li_right_img"
                 :style="{height: setArr.brandHeigt + 'px'}">
              <img src="../../../assets/image/enter/mic1.png"
                   alt=""
                   v-for="(item,index) in brandArr"
                   :key="index"
                   :class="{'is-active': brandIde === index}"
                   @click="clickBrand(index)">
            </div>
            <div class="li_more">
              <div v-if="setArr.brandMore"
                   @click="clickBrandMore(false)"> 更多
                <a-icon type="up" />
              </div>
              <div v-if="!setArr.brandMore"
                   @click="clickBrandMore(true)"> 收起
                <a-icon type="down" />
              </div>
            </div>
          </div>
        </div>

        <div class="list_title_li"
             :style="{height: Number(setArr.maintainHeigt) + Number(16) + 'px'}">
          <div class="tltle_li_left"
               :style="{height: Number(setArr.maintainHeigt) + Number(15) + 'px'}">
            维修保养
          </div>
          <div class="title_li_right">
            <div class="li_right_img"
                 :style="{height: setArr.maintainHeigt + 'px'}">
              <a-checkbox-group v-model="setArr.mainTain"
                                :options="maintainArr"
                                @change="onChangeMaintain"
                                style="line-height:34px" />
            </div>
            <div class="li_more">
              <div v-if="setArr.maintainMore"
                   @click="clickMaintainMore(false)"> 更多
                <a-icon type="up" />
              </div>
              <div v-if="!setArr.maintainMore"
                   @click="clickMaintainMore(true)"> 收起
                <a-icon type="down" />
              </div>
            </div>
          </div>
        </div>

        <div class="list_title_li"
             :style="{height: Number(setArr.sizeHeight) + Number(16) + 'px'}">
          <div class="tltle_li_left"
               :style="{height: Number(setArr.sizeHeight) + Number(15) + 'px'}">
            规格尺寸
          </div>
          <div class="title_li_right">
            <div class="li_right_img"
                 :style="{height: setArr.sizeHeight + 'px'}">
              <!-- <a-checkbox-group :options="maintainArr" @change="onChange" /> -->

              <a-checkbox-group>
                <a-checkbox v-for="item in sizeArr "
                            :key="item.id"
                            :value="item.id"
                            name="type"
                            @change="onChange"
                            style="line-height:34px">
                  {{item.name}}
                </a-checkbox>
              </a-checkbox-group>

            </div>
            <div class="li_more">
              <div v-if="setArr.sizeMore"
                   @click="clickSizeMore(false)"> 更多
                <a-icon type="up" />
              </div>
              <div v-if="!setArr.sizeMore"
                   @click="clickSizeMore(true)"> 收起
                <a-icon type="down" />
              </div>
            </div>
          </div>
        </div>

        <div class="list_title_li"
             :style="{height: Number(setArr.cityHeight) + Number(16) + 'px'}">
          <div class="tltle_li_left"
               :style="{height: Number(setArr.cityHeight) + Number(15) + 'px'}">
            产地
          </div>
          <div class="title_li_right">
            <div class="li_right_img"
                 :style="{height: setArr.cityHeight + 'px'}">
              <a-checkbox-group>
                <a-checkbox v-for="item in cityArr "
                            :key="item.id"
                            :value="item.id"
                            name="type"
                            @change="onChange"
                            style="line-height:34px">
                  {{item.name}}
                </a-checkbox>
              </a-checkbox-group>

            </div>
            <div class="li_more">
              <div v-if="setArr.cityMore"
                   @click="clickCityMore(false)"> 更多
                <a-icon type="up" />
              </div>
              <div v-if="!setArr.cityMore"
                   @click="clickCityMore(true)"> 收起
                <a-icon type="down" />
              </div>
            </div>
          </div>
        </div>

        <div class="list_title_li"
             style="border-bottom:none;height:48px">
          <div class="tltle_li_left"
               style="height:48px">
            价格
          </div>
          <div class="title_li_right"
               style="height:48px">
            <div class="li_right_img">
              <a-input placeholder="请输入最低价"
                       style="width:120px" /> ~
              <a-input placeholder="请输入最高价"
                       style="width:120px" />
            </div>
          </div>
        </div>
      </div>

      <!-- 排序列 -->
      <div class="box_list_sort">
        <div>综合排序</div>
        <div class="xl">销量
          <a-icon class="caret_up"
                  type="caret-up" />
          <a-icon class="caret_down"
                  type="caret-down" />
        </div>
        <div class="xl">价格
          <a-icon class="caret_up"
                  type="caret-up" />
          <a-icon class="caret_down"
                  type="caret-down" />
        </div>
        <div class="xl">销量
          <a-icon class="caret_up"
                  type="caret-up" />
          <a-icon class="caret_down"
                  type="caret-down" />
        </div>
        <div class="xl">
          <a-checkbox @change="cargoCheck">仅显示有货</a-checkbox>
        </div>
        <div class="pagination">
          <!-- <a-icon type="left" style="opacity:0.7" v-if="" /> -->
          <a-icon type="left" /> <span>1</span> / 99
          <a-icon type="right" />
        </div>
      </div>

      <!-- 搜索list页 -->
      <div class="list_box">
        <div class="list_box_left">
          <div class="left_title">商品精选 </div>
          <div class="left_li">
            <img src="../../../assets/image/enter/bz2.png"
                 alt=""
                 width="148"
                 height="148">
            <p class="pay">¥235.00</p>
            <p class="title">邓禄普/DUNLOP 轮胎 205 SP TOURING R1</p>
            <div class="title1">
              <span>米其林旗舰店</span>
              <div> <i>1万+</i> <span>评论</span> </div>
            </div>
          </div>
          <div class="left_li">
            <img src="../../../assets/image/enter/bz2.png"
                 alt=""
                 width="148"
                 height="148">
            <p class="pay">¥235.00</p>
            <p class="title">邓禄普/DUNLOP 轮胎 205 SP TOURING R1</p>
            <div class="title1">
              <span>米其林旗舰店</span>
              <div> <i>1万+</i> <span>评论</span> </div>
            </div>
          </div>
        </div>
        <div class="list_box_right">
          <div class="right_title">
            <span>商品信息</span>
            <span>价格</span>
            <span>交易操作</span>
          </div>
          <div class="list_box_right_box">
            <div class="right_box_li">
              <div style="padding:25px 17px 0;overflow: hidden;">
                <!-- 左侧 -->
                <div class="content_left">
                  <img src="../../../assets/image/enter/bz2.png"
                       alt="">
                  <div class="content_left_float">
                    <p class="content_title">德国马牌(Continental) 轮胎/汽车轮胎 205/55R16 91V C C5 原配威朗 适配马自达6/朗逸/速腾/宝…</p>
                    <p class="content_title1">米其林旗舰店 <img src="../../../assets/image/home/lianxi.png"
                           alt=""> <i style="margin-left:28px">550</i> 已售 <i>700+</i> 评论</p>
                    <p class="content_title2">
                      <img src="../../../assets/image/home/tuijian.png"
                           alt=""> <span>平台推荐优质供应商</span>
                      <img src="../../../assets/image/home/pay.png"
                           alt=""> <span>价格低</span>
                      <img src="../../../assets/image/home/pinzhi.png"
                           alt=""> <span>品质保障</span>
                      <img src="../../../assets/image/home/lianxi.png"
                           alt=""> <span>配送及时</span>
                    </p>
                  </div>
                </div>
                <div class="content_center">
                  <p> <span>¥ 379.00</span> <i>1-99条</i></p>
                  <p> <span>¥ 359.00</span> <i>100-999条</i></p>
                  <p> <span>¥ 339.00</span> <i>>=1000条</i></p>
                </div>
                <div class="content_right">
                  <div v-if="dealStatus === 0"
                       class="right_button">去询价</div>
                  <div v-if="dealStatus === 1"
                       class="right_button">加入购物车</div>
                  <div v-if="dealStatus === 2"
                       class="right_button">申请授权</div>
                  <p><img src="../../../assets/image/home/guanzhu.png"
                         alt=""> 关注商品</p>
                </div>
              </div>
              <div class="content_foot"
                   :class="{ 'content_foot':true, 'is_green': signStatus === 1, 'is_blue': signStatus === 0}">未签约：可询价</div>
            </div>

          </div>

          <div class="pagination_list">
            <span>共 <i>223</i> 页</span>
            <pagination @pageChange="pageChange"
                        :total="total"
                        :current="current"></pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/css/form.less'
import pagination from '@/components/common/pagination.vue'
export default {
  name: 'Home',
  components: {
    pagination
  },
  data () {
    return {
      querys: '',
      total: 1,
      current: 1,
      //品牌标识
      brandIde: 0,
      // 一级导航是否展开
      leve1: true,
      //一级导航物品
      leve1Name: '油品',
      leve1Arr: ['油品', '轮胎', '蓄电池', '过滤系统', '制动系统'],
      leve2Arr: ['机油', '汽油', '菜籽油', '花生油', '大豆油'],
      //二级导航物品
      leve2Name: '轮胎',
      //二级导航是否展开
      leve2: true,
      //一级二级导航
      searchLive1List: [
        {
          id: 1,
          name: '油品'
        },
        {
          id: 2,
          name: '轮胎'
        },
      ],
      setArr: {
        //品牌标识高度
        brandHeigt: '34',
        //品牌是否显示更多
        brandMore: true,
        //维修保养高度
        maintainHeigt: '34',
        //维修保养显示更多
        maintainMore: true,
        //维修多选选中
        mainTain: [],
        mainTainStrong: '',
        //尺寸高度
        sizeHeight: '34',
        //尺寸显示更多 
        sizeMore: true,
        size: [],
        //产地高度
        cityHeight: '34',
        //产地显示更多
        cityMore: true,
        city: []
      },
      //签约状态 0未签约 1已签约
      signStatus: 0,
      //交易操作 0询问价格 1加入购物车 2申请授权
      dealStatus: 1,
      //tab选项
      searchList: [
        {
          id: 1,
          name: '品牌：奔驰'
        },
      ],
      brandArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
      //维修保养
      maintainArr: [
        { label: '品牌：奔驰', value: '1' },
        { label: '轮胎品牌：韩泰', value: '2' },
        { label: '轮胎品牌：3321', value: '3' },
      ],
      //规格尺寸
      sizeArr: [
        {
          id: 1,
          name: '12英寸'
        },
        {
          id: 2,
          name: '14英寸'
        },
      ],
      cityArr: [
        {
          id: 1,
          name: '北京'
        },
        {
          id: 2,
          name: '上海'
        },
      ]
    }
  },
  mounted () {
    this.route()

  },
  methods: {
    //获取url传入数据
    route () {
      this.querys = this.$route.query
      console.log(this.querys);
    },
    //level选择之后操作
    leve1Click1 (item) {
      this.leve1 = false
      this.leve1Name = item
    },

    //leve2选择之后操作
    leve1Click2 (item) {
      this.leve2 = false
      this.leve2Name = item
    },
    //鼠标经过level事件
    selectStyle1 () {
      this.leve1 = true
    },
    //鼠标经过leve2事件
    selectStyle2 () {
      this.leve2 = true
    },
    //点击品牌 
    clickBrand (e) {
      this.brandIde = e
    },
    //品牌点击更多
    clickBrandMore (e) {
      var constNum = ''
      if (!e) {
        constNum = Math.ceil(this.brandArr.length / 11)
        console.log();
        this.setArr.brandHeigt = constNum * 33
        this.setArr.brandMore = false
      } else {
        this.setArr.brandHeigt = 34
        this.setArr.brandMore = true
      }
    },
    //维修保养点击更多
    clickMaintainMore (e) {
      var constNum = ''
      if (!e) {
        constNum = Math.ceil(this.maintainArr.length / 11)
        console.log();
        this.setArr.maintainHeigt = constNum * 33
        this.setArr.maintainMore = false
      } else {
        this.setArr.maintainHeigt = 34
        this.setArr.maintainMore = true
      }
    },
    onChange () { },
    //尺寸点击更多
    clickSizeMore (e) {
      var constNum = ''
      if (!e) {
        constNum = Math.ceil(this.sizeArr.length / 11)
        console.log();
        this.setArr.sizeHeight = constNum * 33
        this.setArr.sizeMore = false
      } else {
        this.setArr.sizeHeight = 34
        this.setArr.sizeMore = true
      }
    },
    //城市点击更多
    clickCityMore (e) {
      var constNum = ''
      if (!e) {
        constNum = Math.ceil(this.cityArr.length / 11)
        console.log();
        this.setArr.cityHeight = constNum * 33
        this.setArr.cityMore = false
      } else {
        this.setArr.cityHeight = 34
        this.setArr.cityMore = true
      }
    },

    //面包屑+搜索
    preventDefault (e) {
      console.log(e);
      if (e === 1) {
        this.setArr.mainTain = []
      }
    },
    //维修保养多选title显示
    onChangeMaintain (checkedValues) {
      var arr = []
      var label_map = {}
      for (var i = 0; i < this.maintainArr.length; i++) {
        var tmp = this.maintainArr[i]
        label_map[tmp['value']] = tmp['label']
      }
      checkedValues.forEach(element => {
        console.log(label_map[element])
        arr.push(label_map[element])
      });
      this.mainTainStrong = arr.join('   ')
    },
    //仅显示有货物
    cargoCheck (e) {
      console.log(`checked = ${e.target.checked}`);
    },
    pageChange (current) {
      console.log(current);
      this.current = current;
    },

  },
}
</script>
<style lang="less" scoped>
.search_box_list {
  background-color: #fff;
  .box_list {
    margin: 0 auto;
    width: @mainViewAreaWidth;
    .box_list_tag {
      margin: 17px 0;
      /deep/ .ant-breadcrumb a {
        font-size: 16px;
        color: @colorCommonFont;
        font-weight: 700;
      }
      /deep/ .ant-tag {
        line-break: 24px;
        color: @activeRed;
      }
      .searchLive1,
      .searchLive11 {
        position: relative;
        display: inline-block;
        height: 24px;
        border: 1px solid @greyBorder;
        padding: 0 5px;
        border-radius: 2px;
        cursor: pointer;
        &:hover {
          .searchLive1box::before {
            content: "";
            z-index: 11;
            width: 100%;
            position: absolute;
            bottom: -2px;
            height: 4px;
            background: #fff;
            left: 0;
          }
        }
        .searchLive1box {
          height: 24px;
          line-height: 24px;
          font-size: 12px;
          color: @colorCommonFont;
          i {
            margin-left: 18px;
            font-size: 12px;
            transition: 0.4s all;
          }
        }
        .searchLive2 {
          position: absolute;
          width: 200px;
          overflow: hidden;
          border: 1px solid @greyBorder;
          background: #fff;
          z-index: 10;
          top: 22px;
          left: -1px;
          transition: 0.4s all;
          display: none;
          padding: 17px 8px;

          span {
            display: inline-block;
            font-size: 12px;
            margin-right: 32px;
            columns: @colorGreyFont;
          }
        }
        .searchLive2::after {
          border-top: 1px solid #33cc33;
        }
      }
      .searchLive1:hover .searchLive2 {
        display: block;
      }
      .searchLive1:hover {
        border-bottom: none;
      }

      .searchLive1:hover .icondown {
        transform: rotate(180deg);
        color: @activeRed;
      }
      .searchLive11:hover .searchLive2 {
        display: block;
      }
      .searchLive11:hover {
        border-bottom: none;
      }

      .searchLive11:hover .icondown {
        transform: rotate(180deg);
        color: @activeRed;
      }
      .searchLive2 span:active .icondown {
        transform: rotate(0deg);
      }
    }
    .list_title {
      border: 1px solid @greyBorder;
      margin-bottom: 16px;
      .list_title_li {
        border-bottom: 1px solid @greyBorder;
        position: relative;
        > div {
          display: inline-block;
        }
        .tltle_li_left {
          width: 160px;
          background-color: @greyDeepBackground;
          padding-top: 14px;
          padding-left: 20px;
          float: left;
          height: 100%;
        }
        .title_li_right {
          width: 900px;
          .li_right_img {
            margin: 8px;
            overflow: hidden;
            img {
              width: 80px;
              height: 33px;
              border: 1px solid @greyBorder;
              border-left: none;
              border-top: none;
            }
            img:nth-child(1) {
              border-left: 1px solid @greyBorder;
            }
            img:nth-child(11n + 1) {
              border-left: 1px solid @greyBorder;
            }
            img:nth-child(-n + 11) {
              border-top: 1px solid @greyBorder;
            }
          }
        }
        .li_more {
          position: absolute;
          right: 10px;
          top: 14px;
          cursor: pointer;
        }
      }
    }
    .box_list_sort {
      height: 40px;
      margin-bottom: 16px;
      border: 1px solid @greyBorder;
      border-left: none;
      position: relative;
      > div {
        display: inline-block;
        line-height: 40px;
        padding: 0 16px;
        padding-right: 22px;
        font-size: 12px;
        color: @colorCommonFont;
        border-left: 1px solid @greyBorder;
      }
      > div:nth-child(1) {
        padding-right: 16px;
      }
      .xl {
        cursor: pointer;
        position: relative;
        .caret_up {
          position: absolute;
          top: 9px;
          right: 8px;
          font-size: 12px;
          opacity: 0.7;
        }
        .caret_down {
          position: absolute;
          top: 17px;
          right: 8px;
          font-size: 12px;
          opacity: 0.7;
        }
      }
      .pagination {
        position: absolute;
        right: -16px;
        top: 0;
        border-left: none;
        i {
          cursor: pointer;
        }
        span {
          color: @activeRed;
        }
      }
    }
    .list_box {
      overflow: hidden;
      .list_box_left {
        width: 180px;
        overflow: hidden;
        float: left;
        border: 1px solid @greyBorder;
        padding: 0 16px;
        .left_title {
          height: 43px;
          font-size: 14px;
          color: @colorCommonFont;
          line-height: 43px;
        }
        .left_li {
          p {
            margin-bottom: 0;
          }
          .pay {
            line-height: 43px;
            color: @activeRed;
            font-size: 14px;
          }
          .title {
            font-size: 12px;
            color: @colorCommonFont;
          }
          .title1 {
            margin-top: 12px;
            font-size: 12px;
            color: @colorGreyFontM;
            overflow: hidden;
            margin-bottom: 24px;
            > span {
              float: left;
            }
            > div {
              float: right;
              i {
                font-style: normal;
                color: @colorCommonFont;
              }
            }
          }
        }
      }
      .list_box_right {
        width: 996px;
        margin-left: 16px;
        overflow: hidden;
        float: left;
        .right_title {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background-color: @greyBackground;
          border: 1px solid @greyBorder;
          border-bottom: none;
          span {
            display: inline-block;
          }
          span:nth-child(1) {
            width: 630px;
            padding-left: 16px;
          }
          span:nth-child(2) {
            width: 230px;
            text-align: center;
          }
          span:nth-child(3) {
            width: 130px;
            text-align: center;
          }
        }
        .list_box_right_box {
          border: 1px solid @greyBorder;
          border-top: none;
          .right_box_li {
            width: 100%;
            height: 180px;
            border-top: 1px solid @greyBorder;
            .content_left {
              width: 480px;
              float: left;
              > img {
                width: 90px;
                height: 90px;
                border: 1px solid @greyBorder;
                float: left;
              }
              .content_left_float {
                margin-left: 106px;
                p {
                  margin-bottom: 0;
                }
                .content_title {
                  font-size: 14px;
                  color: @colorCommonFont;
                  text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
                .content_title1 {
                  font-size: 12px;
                  color: @colorGreyFontM;
                  position: relative;
                  margin: 7px 0;
                  > img {
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    top: 1px;
                  }
                  i {
                    font-style: normal;
                    color: @colorCommonFont;
                    margin-left: 16px;
                  }
                }
                .content_title2 {
                  font-size: 12px;
                  color: @colorGreyFontM;
                  position: relative;
                  img {
                    width: 12px;
                    height: 12px;
                    position: absolute;
                    top: 2px;
                  }
                  span {
                    padding-right: 16px;
                    margin-left: 14px;
                  }
                }
              }
            }
            .content_center {
              width: 230px;
              height: 100%;
              float: left;
              margin-left: 134px;
              padding-left: 40px;
              p {
                margin-bottom: 4px;
              }
              span {
                font-size: 14px;
                color: @activeRed;
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 700;
              }
              i {
                padding-left: 8px;
                color: @colorGreyFont;
                font-size: 12px;
                font-style: normal;
              }
            }
            .content_right {
              width: 115px;
              height: 100%;
              float: left;
              .right_button {
                width: 80px;
                height: 32px;
                border: 1px solid @greyBorder;
                border-radius: 3px;
                text-align: center;
                color: #d73737;
                line-height: 32px;
                font-size: 12px;
                cursor: pointer;
                margin-bottom: 16px;
              }
              p {
                font-size: 12px;
                color: @colorCommonFont;
                position: relative;
                padding-left: 14px;
                img {
                  position: absolute;
                  top: 3px;
                  left: 0px;
                  width: 12px;
                  height: 12px;
                }
              }
            }
            .content_foot {
              height: 40px;
              margin-top: 22px;
              text-align: center;
              width: 100%;
              line-height: 40px;
            }
          }
        }
        .pagination_list {
          padding: 25px 0 40px;
          text-align: right;
          span {
            float: left;
            font-size: 12px;
            color: @colorCommonFont;
            line-height: 32px;
            i {
              color: @activeRed;
              font-style: normal;
            }
          }
        }
      }
    }
  }
  .is_blue {
    background-color: #f4f8ff;
    color: #3b82ff;
  }
  .is_green {
    background-color: #f3fcf3;
    color: #33cc33;
  }
  .is-active {
    border: 1px solid @activeRed !important;
  }
}
</style>